<template>
  <div class="dual-selection-card">
    <!-- 未分配卡片 -->
    <el-card class="card" :body-style="{ padding: '16px' }">
      <div class="card-header">
        <span>未分配</span>
        <span class="count">【{{ unassignedList.length }}】</span>
      </div>
      <div class="filter-bar">
        <el-form inline :model="unassignedFilter">
          <el-form-item label="保健分类：">
            <el-select
              v-model="unassignedFilter.category"
              placeholder="全部（树级）"
            >
              <el-option label="全部（树级）" value="all"></el-option>
              <el-option label="分类1" value="type1"></el-option>
              <el-option label="分类2" value="type2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="展示名称：">
            <el-input
              v-model="unassignedFilter.name"
              placeholder="请输入展示名称"
            ></el-input>
          </el-form-item>
          <el-form-item style="width: 20px;">
            <el-button type="primary" @click="searchUnassigned">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="unassignedList"
        border
        style="width: 100%; margin-top: 8px"
        @selection-change="handleUnassignedSelect"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="category" label="所属分类"></el-table-column>
        <el-table-column prop="displayName" label="展示名称"></el-table-column>
      </el-table>
    </el-card>

    <!-- 中间操作按钮 -->
    <div class="action-buttons">
      <el-button type="primary" @click="assignData">确认</el-button>
      <el-button type="danger" @click="removeData">移除</el-button>
    </div>

    <!-- 已分配卡片 -->
    <el-card class="card" :body-style="{ padding: '16px' }">
      <div class="card-header">
        <span>已分配</span>
        <span class="count">【{{ assignedList.length }}】</span>
      </div>
      <div class="filter-bar">
        <el-form inline :model="assignedFilter">
          <el-form-item label="保健分类：">
            <el-select
              v-model="assignedFilter.category"
              placeholder="全部（树级）"
            >
              <el-option label="全部（树级）" value="all"></el-option>
              <el-option label="分类1" value="type1"></el-option>
              <el-option label="分类2" value="type2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="展示名称：">
            <el-input
              v-model="assignedFilter.name"
              placeholder="请输入展示名称"
            ></el-input>
          </el-form-item>
          <el-form-item style="width: 20px;">
            <el-button type="primary" @click="searchAssigned">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="assignedList"
        border
        style="width: 100%; margin-top: 8px"
        @selection-change="handleAssignedSelect"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="category" label="所属分类"></el-table-column>
        <el-table-column prop="displayName" label="展示名称"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';

// 定义props接收父组件传值
const props = defineProps({
  initialUnassignedList: {
    type: Array,
    default: () => []
  },
  initialAssignedList: {
    type: Array,
    default: () => []
  }
});

// 使用父组件传入的数据
const unassignedList = ref([...props.initialUnassignedList]);
const assignedList = ref([...props.initialAssignedList]);

// 监听props变化
watch(() => props.initialUnassignedList, (newVal) => {
  unassignedList.value = [...newVal];
});

watch(() => props.initialAssignedList, (newVal) => {
  assignedList.value = [...newVal];
});

// 筛选条件
const unassignedFilter = reactive({
  category: 'all',
  name: '',
});
const assignedFilter = reactive({
  category: 'all',
  name: '',
});

// 表格选中项
const selectedUnassigned = ref([]);
const selectedAssigned = ref([]);

// 处理未分配表格选中
const handleUnassignedSelect = (selection) => {
  selectedUnassigned.value = selection;
};

// 处理已分配表格选中
const handleAssignedSelect = (selection) => {
  selectedAssigned.value = selection;
};

// 搜索未分配（示例：实际需结合接口/本地过滤）
const searchUnassigned = () => {
  console.log('搜索未分配条件：', unassignedFilter);
  // 此处可扩展：调接口/过滤unassignedList
};

// 搜索已分配（示例：实际需结合接口/本地过滤）
const searchAssigned = () => {
  console.log('搜索已分配条件：', assignedFilter);
  // 此处可扩展：调接口/过滤assignedList
};

// 确认：未分配 → 已分配
const assignData = () => {
  if (selectedUnassigned.value.length === 0) return;
  // 转移数据
  assignedList.value = [...assignedList.value, ...selectedUnassigned.value];
  // 从"未分配"移除已选
  unassignedList.value = unassignedList.value.filter(
    (item) => !selectedUnassigned.value.some((sel) => sel.id === item.id)
  );
  selectedUnassigned.value = []; // 清空选中
};

// 移除：已分配 → 未分配
const removeData = () => {
  if (selectedAssigned.value.length === 0) return;
  // 转移数据
  unassignedList.value = [...unassignedList.value, ...selectedAssigned.value];
  // 从"已分配"移除已选
  assignedList.value = assignedList.value.filter(
    (item) => !selectedAssigned.value.some((sel) => sel.id === item.id)
  );
  selectedAssigned.value = []; // 清空选中
};
</script>

<style scoped>
.dual-selection-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px;
}

.card {
  flex: 1;
  min-width: 400px;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
}

.count {
  color: red;
  margin-left: 4px;
}
.el-form{
    .el-form-item{
        margin-bottom: 0px;
        width: 39.5%;
    }
    
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 10vh;
  .el-button {
    margin-left: 0px;
  }
}
</style>